<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h1 style="color: blue">欢迎注册会员</h1>
    <form action="" method="get" style="border: 1px solid black">
      <div>
        <label for="phone">手机号码</label>
        <input type="text" iphone="phone" placeholder="11位手机号" />
        <span style="color: red">必填</span>
      </div>
      <div>
        <label for="pwd">创建密码</label>
        <input type="text" password="pwd" placeholder="8位密码" />
        <span style="color: red">必填</span>
      </div>
      <div>
        <label for="mail">注册邮箱</label>
        <input type="text" email="mail" placeholder="例如：wustzz@qq.com" />
        <span style="color: red">必填</span>
      </div>
      <div>
        &nbsp;&nbsp;&nbsp;验证码
        <input type="text" id="captchaInput" placeholder="请输入验证码" />
        <span id="captchaDisplay" type="text" style="border: 1px solid black"
          >UJpg</span
        >
        <a onclick="generateCaptcha()" href="javascript:">刷新</a>
      </div>
      <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：
        <input type="radio" name="if" value="male" checked="checked" /> 男
        <input type="radio" name="if" value="female" /> 女
      </div>
      <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="day">生日</label>
        <input type="text" iday="day" placeholder="年/月/日" />
      </div>
      <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="old">年龄</label>
        <input type="text" iold="old" />
      </div>
      <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯
        <select name="province">
          <option value="0">湖北省</option>
          <option value="1" selected="selected">山东省</option>
          <option value="2">北京</option>
        </select>
        <select name="city">
          <option value="0">武汉市</option>
          <option value="1" selected="selected">荆门市</option>
          <option value="2">日照市</option>
        </select>
      </div>
      <div>
        个人学历
        <select name="education">
          <option value="0">本科</option>
          <option value="1">大专</option>
          <option value="2">中专</option>
          <option value="3">高中</option>
        </select>
      </div>
      <div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月薪
        <input
          type="range"
          id="wage"
          name="wage"
          min="0.0"
          max="10000.0"
          step="500.0"
          value="5000.0"
        />
        <span id="msg"></span>
      </div>
      <div>
        个人爱好
        <label> <input type="checkbox" name="like" value="sing" />唱歌 </label>
        <label> <input type="checkbox" name="like" value="jog" />跑步 </label>
        <label> <input type="checkbox" name="like" value="swim" />游泳 </label>
      </div>
      <div>
        个人照片
        <input type="file" id="imageInput" accept="image/*" />
        <img
          id="previewImage"
          src=""
          alt="图片预览"
          style="max-width: 300px; height: auto"
        />
      </div>
      <div>
        个人简历
        <textarea name="intro" cols="50" rows="10"></textarea>
      </div>

      <div style="text-align: center;">
      <input type="submit" value="提交" />
      <input type="reset" value="重填" />
      </div>
    </form>

    <script>
      function generateCaptcha() {
        var codeText = document.getElementById("captchaDisplay");
        codeText.innerHTML = getCode();
      }

      function getCode() {
        // 定义验证码的字符集
        var chars =
          "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        var captcha = "";
        // 生成一个4位的验证码
        for (var i = 0; i < 4; i++) {
          captcha += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return captcha;
      }
    </script>

    <script>
      var msg = document.getElementById("msg"); // 根据id值找到span元素
      window.onload = function () {
        msg.innerHTML = document.getElementById("wage").value; // 获取区间域初始value值
      };
      document.getElementById("wage").onchange = function () {
        msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
      };
    </script>

    <script>
      // 获取input和img元素
      const imageInput = document.getElementById("imageInput");
      const previewImage = document.getElementById("previewImage");

      // 为input元素添加change事件监听器
      imageInput.addEventListener("change", function (event) {
        // 获取用户选择的文件
        const file = event.target.files[0];
        if (file) {
          // 创建FileReader对象
          const reader = new FileReader();

          // 设置FileReader的onload事件处理函数
          reader.onload = function (e) {
            // 将读取到的图片数据设置为img元素的src属性
            previewImage.src = e.target.result;
          };

          // 读取文件内容，转换为DataURL
          reader.readAsDataURL(file);
        }
      });
    </script>
  </body>
</html>
